<template>
  <div>
    <div>
      <el-alert type="success">通义千问-文本大语言模型</el-alert>
    </div>

    <el-card>
    <!--消息列表-->
      <div v-for="(item, index) in infoList" :key="index">
        <div class="text-parent" v-if="item.user === 'user'">
          <el-avatar icon="el-icon-user-solid"></el-avatar>
          <span class="text">{{item.message}}</span>
        </div>

        <div class="text-parent">
          <el-avatar :src="avatar_tongyi"></el-avatar>

        </div>
      </div>
    </el-card>

    <el-card style="position: fixed;bottom: 10px;width: 100%">
      <el-row :gutter="10">
        <el-col :span="20">
          <el-input v-model="question.message" placeholder="请输入问题"
                    clearable
                    @keyup.enter.native="startStream"/>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="startStream">发送</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {tongyiCall} from "@/api/ai/tongyi";
import {getToken} from "@/utils/auth";
import {fetchEventSource} from '@microsoft/fetch-event-source';

export default {
  data() {
    return {
      question:{
        user: 'user',
        message: '你好 请只回答我12个字!'
      },
      avatar_tongyi: "https://img.alicdn.com/imgextra/i3/O1CN01sffRIx1nb3dXCKdFC_!!6000000005107-2-tps-1024-1024.png",
      answer: "",
      eventSource: null,
      infoList:[],
      imageList: [],
      baseUrl: process.env.VUE_APP_BASE_API,
      header: {
        Authorization: "Bearer " + getToken(),
        'Content-Type': 'application/json',
      },
    };
  },
  methods: {
    startStream() {
      // 上一次回答清空
      let question = JSON.parse(JSON.stringify(this.question));
      this.infoList.push(question);
      this.answer = "";


      const url = `${this.baseUrl}/tongyi/text/${this.question.message}`;

      // 创建EventSource实例
      const eventSource = new EventSource(url);
      let answer = "";
      eventSource.onmessage = (event) => {
        let parse = JSON.parse(event.data);
        console.log(parse);
        let choice = parse.output.choices[0];
        answer += choice.message.content;
        this.answer = answer;


        if (choice.finishReason === "stop"){
          // 传输完成
          console.log("传输完成")

          let data = {
            user: 'report',
            message: answer
          }
          this.infoList.push(data);

          // 关闭长连接
          eventSource.close()
        }
      };
      eventSource.onerror = () => {
        eventSource.close();
      };
    },

    stopStream() {
      if (this.eventSource) {
        this.eventSource.close(); // 关闭EventSource连接
        this.eventSource = null;
        console.log('Connection to SSE closed');
      }
    },
  },
  mounted() {

  },
  beforeDestroy() {
    this.stopStream();

  }
}
</script>

<style scoped>
.text-parent{
  margin-top: 10px;
  display: flex;
  align-items: center; /* 垂直居中 */
  height: 100%; /* 确保父元素的高度足够包裹子元素以实现垂直居中 */
}
.el-avatar{
  margin-right: 5px;
}
</style>
